{{ $here := .RelPermalink }}
{{ $menu := site.Menus.navbar }}
{{ $modes := slice "Light" "Dark" }}
<nav
  x-cloak
  x-data="{
    open: false,
  }"
  class="z-50 dark:bg-dark dark:border-gray-700 border-b"
  tabindex="0">

  <div class="mx-auto px-4 sm:px-6 lg:px-10 py-1 md:py-1.5 lg:py-2">
    <div class="relative flex items-center justify-between h-16">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <a href="{{ site.BaseURL }}">
            {{ range $modes }}
            {{ $src := printf "/img/logos/vector-logo-%s.svg" (. | lower) }}
            <div x-show="$store.global.is{{ . }}()">
              {{ partial "svg.html" (dict "src" $src "class" "h-auto w-32") }}
            </div>
            {{ end }}
          </a>
        </div>
        <div class="hidden lg:block lg:ml-6">
          <div class="flex space-x-4 lg:space-x-2.5 xl:space-x-4">
            {{ range $menu }}
            {{ $isActive := hasPrefix $here .URL }}
            <a href="{{ .URL }}" class="flex items-center tracking-tight px-2.5 rounded-sm lg:text-sm xl:text-base font-normal">
              <span class="dark:text-gray-300 hover:text-primary-dark dark:hover:text-secondary{{ if $isActive }} dark:text-primary text-secondary{{ end }}">
                {{ .Name }}
              </span>
            </a>
            {{ end }}
          </div>
        </div>
      </div>


      <div class="flex justify-end flex-grow items-center lg:ml-6 h-full">
        {{/* Dark/light mode toggler */}}
        {{ partial "navbar/mode-toggler.html" . }}

        {{/* Search bar */}}
        <div class="max-w-xxs xl:flex-grow ml-4">
          <label for="search" class="sr-only">
            Search
          </label>

          {{/* Targeted by the global site search in assets/js/search.tsx */}}
          <div id="site-search"></div>
        </div>

        {{/* Social icons and signup button */}}
        <div class="hidden lg:flex lg:order-2 text-lg ml-3 lg:ml-4 h-full items-center">
          {{ partial "social-buttons.html" (dict "color" true) }}
          <div class="ml-4">
            {{ partial "button-modal.html" (dict "context" . "form_id" "12461" "text" "Updates" "additional_classes" "h-11") }}
          </div>
        </div>

        {{/* Mobile dropdown toggle */}}
        <div class="flex lg:hidden ml-4">
          <button @click="open = !open" type="button"
            class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
            aria-controls="mobile-menu" aria-expanded="false">
            <span class="sr-only">
              Open navbar dropdown menu
            </span>

            {{/* Heroicon: outline/menu-alt-3 */}}
            <svg x-show="!open" class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
            </svg>

            {{/* Heroicon: outline/x */}}
            <svg x-show="open" class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
              stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>

  {{/* Mobile menu */}}
  <div x-show="open" @click.away="open = false" class="z-10 dark:shadow-none dark:bg-gray-900 bg-white lg:hidden absolute w-full shadow" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1">
      {{ range $menu }}
      {{ $isActive := hasPrefix $here .URL }}
      <a href="{{ .URL }}" class="block px-3 rounded-md text-base font-medium{{ if $isActive }} dark:bg-gray-700 bg-gray-900 text-white{{ else }} dark:text-gray-300 dark:hover:bg-gray-600 hover:bg-gray-700 text-gray-500 hover:text-white{{ end }}">
        {{ .Name }}
      </a>
      {{ end }}
    </div>

    <div class="flex text-lg px-5 mb-2 mt-3.5">
      {{ partial "social-buttons.html" (dict "color" true) }}
    </div>

    <div class="mx-5 mb-4 mt-3.5">
      {{ partial "button-modal.html" (dict "context" . "form_id" "12461" "text" "Updates" "additional_classes" "h-11") }}
    </div>
  </div>
</nav>